<template>
  <el-container style="height: 100vh;">
    <!-- 侧边栏 -->
    <UserSidebar :activeMenu="activeMenu" @update:activeMenu="activeMenu = $event" />

    <!-- 主内容 -->
    <el-container>
      <!-- 顶部导航栏 -->
      <el-header
        style="
          height: 60px;
          background: linear-gradient(135deg, #74b4f2,#7e8ba9 );
          color: white;
          font-weight: bold;
          font-size: 1.2rem;
          display: flex;
          align-items: center;
          padding: 0 20px;
          box-shadow: 0 2px 12px rgba(93, 173, 226, 0.15);
        "
      >
        🎓 考研真题训练系统 · 用户首页
      </el-header>

      <el-main style="background-color: #f8f9fa; overflow-y: auto; padding: 30px;">
        <div class="grid">
          <!-- 左列主内容 -->
          <div>
            <!-- 用户信息卡片 -->
            <div class="card">
              <div class="profile">
                <img :src="user.avatar" alt="头像" @load="imgLoaded = true" v-show="imgLoaded" />
                <el-skeleton v-if="!imgLoaded" style="width: 80px; height: 80px;" animated />
                <div class="info">
                  <h2>{{ greeting }}，{{ user.name }}！</h2>
                  <p>学习进度：{{ user.progress }}% | 上次测试：{{ user.lastScore }}分</p>
                </div>
              </div>

              <!-- 快捷功能按钮 -->
              <div class="quick-links">
                <button @click="goTo('learning')">📘 学习知识点</button>
                <button @click="goTo('practice')">✏️ 进入练题</button>
                <button @click="goTo('bank')">⭐ 我的收藏</button>
                <button @click="goTo('messages')">💬 留言反馈</button>
              </div>
            </div>

            <!-- 今日推荐 -->
            <div class="card" style="margin-top: 20px;">
              <h3>📌 今日学习推荐</h3>
              <ul class="push-list">
                <li>
                  🧠 推荐复习知识点：<strong>{{ todayTask.knowledge }}</strong>
                  <button @click="goTo('learning', todayTask.knowledge)">去复习</button>
                </li>
                <li>
                  ✏️ 今日练题建议：<strong>{{ todayTask.practice }}</strong>
                  <button @click="goTo('practice', todayTask.practiceType)">去练题</button>
                </li>
                <li>
                  📋 模拟考试：<strong>{{ todayTask.testNotice }}</strong>
                  <button @click="goTo('test')">查看</button>
                </li>
              </ul>
            </div>

            <!-- 图表 -->
            <div class="card" style="margin-top: 20px;">
              <h3>📊 最近学习活跃度</h3>
              <div ref="chart" style="height: 300px;"></div>
            </div>
          </div>

          <!-- 右列 -->
          <div>
            <!-- 倒计时 -->
            <div class="card calendar">
              <div class="countdown">📅 我的日程：距初试还有：<strong>{{ countdown }}</strong> 天</div>
              <ul>
                <li>🗓️ 2025-01-15：初试（上午数学，下午英语）</li>
                <li>🗓️ 2025-02-01：成绩公布</li>
                <li>🗓️ 2025-03-10：复试通知</li>
              </ul>
            </div>

            <!-- 公告 -->
            <div class="card notifications" style="margin-top: 20px;">
              <h3>📢 系统公告</h3>
              <ul>
                <li v-for="(notice, index) in notices" :key="index">📍 {{ notice }}</li>
              </ul>
            </div>

            <!-- 动态 -->
            <div class="card" style="margin-top: 20px;">
              <h3>🕘 最近动态</h3>
              <ul>
                <li>✅ 收藏了题目「函数极限证明」</li>
                <li>📝 提交留言「第5题答案是否有误」</li>
                <li>🏁 完成模拟考试，得分：92</li>
              </ul>
            </div>

            <!-- 每日一句 -->
            <div class="card" style="margin-top: 20px;">
              <h3>🌟 每日一句</h3>
              <blockquote style="font-style: italic; color: #6c757d; margin: 10px 0 0;">
                {{ dailyQuote }}
              </blockquote>
            </div>
          </div>
        </div>
      </el-main>

      <el-footer style="text-align: center; padding: 15px; color: #6c757d; font-size: 0.85rem;">
        © 2025 考研真题训练系统 - 用户端界面
      </el-footer>
    </el-container>
  </el-container>
</template>

<script>
import * as echarts from 'echarts'
import UserSidebar from './UserSidebar.vue'

export default {
  name: 'UserHome',
  components: {
    UserSidebar
  },
  data() {
    return {
      user: {
        name: '张同学',
        avatar: 'https://via.placeholder.com/80',
        progress: 65,
        lastScore: 92
      },
      todayTask: {
        knowledge: '导数应用',
        practice: '5道三角函数题',
        practiceType: 'trigonometry',
        testNotice: '周五 14:00 模拟测试'
      },
      countdown: 0,
      notices: [
        '模拟考试入口已开启',
        '新增三角函数题型讲解',
        'GPT智能答疑已上线！',
        '数学一资料更新至2025年'
      ],
      dailyQuote: '"人生苦短，我用Python"——Python之禅',
      activeMenu: 'UserIndex',
      imgLoaded: false
    }
  },
  computed: {
    greeting() {
      const hour = new Date().getHours()
      if (hour < 11) return '早上好 ☀️'
      if (hour < 14) return '中午好 🌤️'
      if (hour < 18) return '下午好 🌇'
      return '晚上好 🌙'
    }
  },
  mounted() {
    this.updateCountdown()
    this.drawChart()
  },
  methods: {
    updateCountdown() {
      const today = new Date()
      const examDay = new Date('2025-01-15')
      const diff = Math.ceil((examDay - today) / (1000 * 60 * 60 * 24))
      this.countdown = diff
    },
    drawChart() {
      const chart = echarts.init(this.$refs.chart)
      chart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '学习次数',
            data: [3, 5, 2, 7, 6, 4, 8],
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 8,
            lineStyle: { color: '#5dade2', width: 3 },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(93, 173, 226, 0.3)' },
                { offset: 1, color: 'rgba(93, 173, 226, 0.05)' }
              ])
            }
          }
        ]
      })
    },
    goTo(page, param = '') {
      if (page === 'learning') {
        this.$router.push({ path: '/learning', query: { topic: param } })
      } else if (page === 'practice') {
        this.$router.push({ path: '/practice', query: { type: param } })
      } else {
        this.$router.push({ path: `/${page}` })
      }
    }
  }
}
</script>

<style scoped>
body {
  font-family: 'Helvetica Neue', 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background-color: #f8f9fa;
}
.grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}
.card {
  background: linear-gradient(135deg, #ffffff, #f8f9fc);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(93, 173, 226, 0.08);
  border: 1px solid rgba(93, 173, 226, 0.1);
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(93, 173, 226, 0.12);
}
.profile {
  display: flex;
  align-items: center;
  gap: 20px;
}
.profile img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(93, 173, 226, 0.2);
}
.profile .info h2 {
  margin-bottom: 8px;
  font-size: 1.3rem;
  color: #2c3e50;
}
.profile .info p {
  color: #5a6c7d;
}
.quick-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin-top: 20px;
}
.quick-links button {
  padding: 14px 16px;
  font-size: 0.95rem;
  border: none;
  background: linear-gradient(135deg, #5dade2, #85c1e9);
  color: white;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}
.quick-links button:hover {
  background: linear-gradient(135deg, #4a9bd1, #77a9ca);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(93, 173, 226, 0.3);
}
.card h3 {
  color: #2c3e50;
  margin-bottom: 16px;
}
.card ul {
  list-style: none;
  padding-left: 0;
}
.card li {
  margin-bottom: 12px;
  color: #5a6c7d;
  line-height: 1.5;
}
.card button {
  margin-left: 10px;
  background-color: #5090bb;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.card button:hover {
  background-color: #4a9bd1;
  transform: scale(1.05);
}
.countdown {
  color: #5dade2;
  font-weight: bold;
  margin-bottom: 16px;
  font-size: 1.05rem;
}
.push-list li {
  padding: 12px;
  background-color: rgba(67, 126, 165, 0.05);
  border-radius: 8px;
  margin-bottom: 12px;
  border-left: 4px solid #3b7196;
}
.notifications li, .card li {
  padding: 8px 0;
  border-bottom: 1px solid rgba(93, 173, 226, 0.1);
}
.notifications li:last-child, .card li:last-child {
  border-bottom: none;
}
</style>